<template>
	<view v-show="is_loaded">
		<view class="orderList" v-if="1==order_data.serv_enum">
			<view class="headConTwo" >
				<view class="addressCon">
					<view class="linesolid"></view>
					<view class="addressname">
						<view class="drop"></view>
						<view class="detail">{{order_data.departure}}</view>
					</view>
					<view class="addressname mtop">
						<view class="drop"></view>
						<view class="detail">{{order_data.destination}}</view>
					</view>
				</view>
				<view class="state right">{{order_data.status_text}}</view>
			</view>
			<view class="cao">
				<view class="time top">{{order_data.createtime}}</view>
				<view class="ts" v-show="4==order_data.status" @click="complaint_order">我要投诉</view>
			</view>
		</view>
		<view class="box" v-else>
			<view class="head">
				<view class="name">{{order_data.serv_name}}服务</view>
				<view class="state">{{order_data.status_text}}</view>
			</view>
			<view class="address">{{order_data.destination}}</view>
			<view class="time">{{order_data.createtime}}</view>
		</view>
		<view class="code">
			<view class="codetitle">核销码</view>
			<view class="number">{{order_data.check_code}}</view>
		</view>
		<view class="more">
			<view class="list">
				<view class="title">订单编号</view>
				<view class="content">{{order_data.serv_order_no}}</view>
			</view>
			<view class="list">
				<view class="title">服务项目</view>
				<view class="content">{{order_data.serv_name}}服务</view>
			</view>
			<view class="list" v-show="2==order_data.serv_enum">
				<view class="title">服务地点</view>
				<view class="content">{{order_data.destination}}</view>
			</view>
			<view class="list">
				<view class="title">发布时间</view>
				<view class="content">{{order_data.stat_1_time}}</view>
			</view>

			<view class="list" v-show="1==order_data.serv_enum">
				<view class="title">上车地点</view>
				<view class="content">{{order_data.departure}}</view>
			</view>
			<view class="list" v-show="1==order_data.serv_enum">
				<view class="title">下车地点</view>
				<view class="content">{{order_data.destination}}</view>
			</view>
			<view class="list" v-show="1==order_data.serv_enum">
				<view class="title">司机姓名</view>
				<view class="content">{{order_data.serv_user_name}}</view>
			</view>
			<view class="list" v-show="2==order_data.serv_enum">
				<view class="title">师傅姓名</view>
				<view class="content">{{order_data.serv_user_name}}</view>
			</view>
			<view class="list" v-show="1==order_data.serv_enum">
				<view class="title">司机电话</view>
				<view class="content">{{order_data.serv_user_phone}}</view>
			</view>
			<view class="list" v-show="2==order_data.serv_enum">
				<view class="title">师傅电话</view>
				<view class="content">{{order_data.serv_user_phone}}</view>
			</view>
			<view class="list">
				<view class="title">发布时间</view>
				<view class="content">{{order_data.stat_1_time}}</view>
			</view>
			<view class="list">
				<view class="title">接单时间</view>
				<view class="content">{{order_data.stat_2_time}}</view>
			</view>
			<view class="list">
				<view class="title">完成时间</view>
				<view class="content">{{order_data.stat_4_time}}</view>
			</view>
		</view>
		<view style="height: 90px;"></view>
		<view class="foot" v-show="show_cancel">
			<view class="operate" @click="cancel_order">取消订单</view>
			<!-- <view class="operate">联系司机</view> -->
			<!-- <view class="operate">确认完成</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_id:'',
				order_data:{},
				is_loaded:false,
				show_cancel:false,
			}
		},
		onLoad(option){
			console.log(option)
			this.order_id = option.order_id;
			this.load_data();
		},
		methods: {
			async cancel_order(){
				var order_id = this.order_id;
				var that = this;
				if(that.loading){
					return;
				}
				that.loading = true;
				uni.showLoading({
					title: '取消中'
				});
				await uni.request({
					url: '/dispatch/home/cancelOrder',
					data: {
						order_id:order_id
					},
					method:"POST",
					success: res => {
						console.log("更新列表")
						setTimeout(()=>{
								this.load_data();
						},500);
						
					},
					complete:()=>{
						setTimeout(()=>{
							uni.hideLoading();
							that.loading = false;
						},100)
					}
				});	
			},
			async load_data(){
				// 获取列表
				await uni.request({
					url: '/dispatch/home/getOrderDetail',
					data: {
						order_id:this.order_id
					},
					method:"POST",
					success: res => {
						this.order_data = res.data;
						this.is_loaded = true;
						
						if(['1','2','3'].indexOf(this.order_data.status)>-1){
							this.show_cancel = true;
						}
						// this.list = this.list.concat(res.data);
						console.log(res);
					},
					complete:()=>{
					}
				});	
			},
			// complaint_order() {
			// 	uni.navigateTo({
			// 		url: '/pages/dispatch/complaint/complaint'
			// 	})
				
			// }
			complaint_order(){
				uni.redirectTo({
					url:"/pages/dispatch/complaint/complaint?order_id="+this.order_id
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #F7F7F7;
	}

	.box {
		width: 682rpx;
		margin-left: 34rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		margin-top: 30rpx;
		padding: 40rpx 0;
	}

	.head {
		display: flex;
		justify-content: space-between;
	}

	.name {
		font-size: 36rpx;
		margin-left: 30rpx;
		color: #3D3D3D;
	}

	.state {
		font-size: 26rpx;
		color: #84BD00;
		margin-right: 30rpx;
	}

	.address {
		width: 622rpx;
		margin-top: 26rpx;
		font-size: 30rpx;
		color: #999999;
		margin-left: 30rpx;
	}

	.time {
		margin-left: 30rpx;
		margin-top: 26rpx;
		font-size: 26rpx;
		color: #999999;
	}

	.more {
		width: 682rpx;
		margin-left: 34rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		margin-top: 30rpx;
		padding: 20rpx 0;
	}

	.list {
		width: 622rpx;
		margin-left: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 70rpx;
	}

	.title {
		width: 260rpx;
		font-size: 30rpx;
		color: #999999;
	}

	.content {
		font-size: 30rpx;
		color: #333333;
	}

	.code {
		width: 682rpx;
		margin-left: 34rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		margin-top: 30rpx;
		padding: 40rpx 0;
	}

	.codetitle {
		font-size: 32rpx;
		color: #333333;
		margin-left: 40rpx;
	}

	.number {
		width: 100%;
		text-align: center;
		font-size: 55rpx;
		margin-top: 20rpx;
	}

	.foot {
		width: 100%;
		position: fixed;
		bottom: 70rpx;
		padding-bottom: env(safe-area-inset-bottom);
		display: flex;
		justify-content: center;
	}

	.operate {
		width: 678rpx;
		background-color: #84BD00;
		color: #ffffff;
		font-size: 32rpx;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 82rpx;
	}

	.orderList {
		width: 690rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		margin-left: 30rpx;
		margin-top: 30rpx;
		padding-top: 46rpx;
		padding-bottom: 36rpx;
	}

	.headCon {
		width: 630rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-left: 30rpx;
	}

	.headConTwo {
		width: 630rpx;
		display: flex;
		justify-content: space-between;
		margin-left: 30rpx;
		padding-bottom: 20rpx;
	}

	.headName {
		font-size: 36rpx;
		color: #3D3D3D;
	}

	.state {
		font-size: 26rpx;
		color: #84BD00;
	}







	.drop {
		width: 14rpx;
		height: 14rpx;
		background-color: #D8D8D8;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.addressCon {
		width: 500rpx;
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.linesolid {
		position: absolute;
		left: 7rpx;
		border-left: 1px dashed #D8D8D8;
		height: 60%;
	}

	.addressname {
		font-size: 30rpx;
		color: #333333;
		display: flex;
		align-items: center;
	}

	.detail {
		width: 466rpx;
	}

	.mtop {
		margin-top: 20rpx;
	}

	.right {
		margin-right: 0;
	}

	.top {
		margin-top: 0;
	}

	.cao {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.ts {
		width: 162rpx;
		height: 54rpx;
		border-radius: 50rpx;
		border: 1px solid #DBDBDB;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
		color: #333333;
		margin-right: 30rpx;
	}
</style>